<template>
    <div>
        <Drawer title="Basic Drawer" placement="right" :closable="false" v-model="showValue" width="78"
            @on-visible-change="onVisibleChange" style="z-index:999999">
            <div class="titleBox" style="height:29px" slot="header">营养分析</div>
            <div class="contentBox">
                <div class="contentBox-top" ref="element">
                    <div class="contentBox-top-item" style="height:calc(50vh - 89px)">
                        <div class="contentBox-top-item-ab">
                            <div>
                                <div style="font-size: 18px;font-weight: 600;color: #000000;">伙食费分析图(元)</div>
                                <div style="font-size: 12px;color: #666666;font-weight: 400;">实际伙食费标准伙食费对比统计图</div>
                            </div>
                            <!-- <div class="barBox"> 
                                <div class="barBox-item" style="margin-right:20px;">
                                    <div class="barBox-item-bar" style="background:#49AFFF"></div>
                                    <div>标准伙食费</div>
                                </div>
                                <div class="barBox-item">
                                    <div class="barBox-item-bar" style="background:#FFD966"></div>
                                    <div>实际伙食费</div>
                                </div>
                            </div> -->
                        </div>
                        <div id="container" ref="container" style="width:100%;margin-top:20px"
                            :style="{ height: 'calc(50vh - 109px)', width: 'calc(39vw - 60px)' }"></div>
                    </div>
                    <div class="contentBox-top-item" style="height:calc(50vh - 89px)">
                        <div class="contentBox-top-item-ab">
                            <div>
                                <div style="font-size: 18px;font-weight: 600;color: #000000;">食谱热量分析图(千卡)</div>
                                <div style="font-size: 12px;color: #666666;font-weight: 400;">实际热量标准热量对比统计图</div>
                            </div>
                            <!-- <div class="barBox"> 
                                <div class="barBox-item" style="margin-right:20px;">
                                    <div class="barBox-item-bar" style="background:#49AFFF"></div>
                                    <div>标准热量</div>
                                </div>
                                <div class="barBox-item">
                                    <div class="barBox-item-bar" style="background:#66D9A9"></div>
                                    <div>实际热量</div>
                                </div>
                            </div> -->
                        </div>
                        <div id="container2" ref="container2" style="width:100%;margin-top:20px"
                            :style="{ height: 'calc(50vh - 109px)', width: 'calc(39vw - 60px)' }"></div>
                    </div>
                </div>
                <div class="contentBox-bottom">
                    <div class="contentBox-bottom-item">
                        <div class="contentBox-top-item-ab">
                            <div>
                                <div style="font-size: 18px;font-weight: 600;color: #000000;">食谱营养素产热比</div>
                                <div style="font-size: 12px;color: #666666;font-weight: 400;">食谱营养素产热比饼图</div>
                            </div>
                            <div></div>
                        </div>
                        <div id="container3" ref="container3" style="width:100%;margin-top:20px"
                            :style="{ height: 'calc(50vh - 109px)', width: 'calc(29vw - 100px)' }"></div>
                    </div>
                    <div class="contentBox-bottom-item">
                        <div class="contentBox-top-item-ab">
                            <div>
                                <div style="font-size: 18px;font-weight: 600;color: #000000;">食谱三餐热能比</div>
                                <div style="font-size: 12px;color: #666666;font-weight: 400;">食谱三餐热能比饼图</div>
                            </div>
                            <div></div>
                        </div>
                        <div id="container4" ref="container4" style="width:100%;margin-top:20px"
                            :style="{ height: 'calc(50vh - 109px)', width: 'calc(29vw - 100px)' }"></div>
                    </div>
                    <div class="contentBox-bottom-item">
                        <div class="contentBox-top-item-ab">
                            <div>
                                <div style="font-size: 18px;font-weight: 600;color: #000000;">食谱蛋白质分析图</div>
                                <div style="font-size: 12px;color: #666666;font-weight: 400;">食谱蛋白质饼图</div>
                            </div>
                            <div></div>
                        </div>
                        <div id="container5" ref="container5" style="width:100%;margin-top:20px"
                            :style="{ height: 'calc(50vh - 109px)', width: 'calc(29vw - 100px)' }"></div>
                    </div>
                </div>
            </div>
        </Drawer>
    </div>
</template>

<script>
// import { selectailocaldishtype, selectailocalfoodBydish } from "@/api/organ/dishesModule";
import * as echarts from "echarts";
export default {
    components: {},
    name: "nutritionChart",
    data() {
        return {
            showValue: false,
            chartHeight: 0,
            nums: ['one', 'two', 'three', 'four', 'five', 'six', 'seven'],
            meal_money: [],
            meal_money_standard: []
        };
    },
    mounted() {
        this.chartHeight = document.querySelector('.contentBox-top-item').offsetHeight;
        console.log(this.chartHeight)
    },
    props: {
        dataItem: {
            type: Object,
            default() {
                return {}
            }
        },
        dateList: {
            type: Array,
            default() {
                return []
            }
        },
        props: {
            nutrition: {
                type: Array,
                default() {
                    return [
                        { value: 333, name: "糖类" },
                        { value: 333, name: "蛋白质" },
                        { value: 333, name: "脂肪" },
                    ]
                }
            },
        },
    },
    methods: {
        onVisibleChange(v) {
            if (!v) {
                this.$parent.showNutrition = false;
            }
        },
        show() {
            this.showValue = true;
            if (this.dataItem.meal_money) {
                let arr = this.$cu.deepClone(this.dataItem.meal_money);
                this.meal_money = []
                this.meal_money_standard = [];
                console.log(this.nums)
                this.nums.forEach(item => {
                    this.meal_money.push(arr[item].meal_money);
                    this.meal_money_standard.push(arr[item].meal_money_standard);
                });
                this.myChart();
            }
            if (this.dataItem.thermalAnalysis) {
                this.myChart2();
            }
            if (this.dataItem.nutrienter) {
                this.myChart3();
            }

            if (this.dataItem.heatGeneration) {
                this.myChart4();
            }
            if (this.dataItem.highQualityprotein) {
                this.myChart5();
            }

        },
        openFenxi() {

        },
        myChart() {
            //1.echarts初始化。
            let myChart = echarts.init(this.$refs['container']);
            //2.设置图表配置项
            // 绘制图表
            let option;

            option = {
                xAxis: {
                    data: this.dateList
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                legend: {
                    top: 0,
                    right: 10,
                    icon: 'rect',
                    orient: 'horizontal',
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 24, // 修改间距
                    textStyle: {
                        height: 10,
                        fontSize: 14,
                        color: "#333",
                        padding: [0, 0, 0, 8], // 修改文字和图标距离
                    },
                    show: true,
                },
                yAxis: {},
                series: [
                    {
                        type: 'bar',
                        name: '标准伙食费',
                        data: this.meal_money_standard ? this.meal_money_standard : [],
                        itemStyle: {
                            normal: {
                                color: '#49AFFF',
                                label: {
                                    show: true,
                                    position: 'top',
                                    color: '#49AFFF'
                                }
                            }
                        }
                    },
                    {
                        type: 'bar',
                        name: '实际伙食费',
                        data: this.meal_money ? this.meal_money : [],
                        itemStyle: {
                            normal: {
                                color: '#FFD966',
                                label: {
                                    show: true,
                                    position: 'top',
                                    color: '#FFD966'
                                }
                            }
                        }
                    }
                ]
            };
            option && myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },
        myChart2() {
            //1.echarts初始化。
            let myChart = echarts.init(this.$refs['container2']);
            //2.设置图表配置项
            // 绘制图表
            let option;
            let thermalAnalysis = [];
            if (this.dataItem.thermalAnalysis) {
                thermalAnalysis = this.dataItem.thermalAnalysis.thermalAnalysisarray
            }
            let standardThermalAnalysisarray = [];
            if (this.dataItem.thermalAnalysis) {
                standardThermalAnalysisarray = this.dataItem.thermalAnalysis.standardThermalAnalysisarray
            }
            option = {
                xAxis: {
                    data: this.dateList
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                legend: {
                    top: 0,
                    right: 10,
                    icon: 'rect',
                    orient: 'horizontal',
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 24, // 修改间距
                    textStyle: {
                        height: 10,
                        fontSize: 14,
                        color: "#333",
                        padding: [0, 0, 0, 8], // 修改文字和图标距离
                    },
                    show: true,
                },
                yAxis: {},
                series: [
                    {
                        type: 'bar',
                        name: '标准热量',
                        data: standardThermalAnalysisarray,
                        itemStyle: {
                            normal: {
                                color: '#49AFFF',
                                label: {
                                    show: true,
                                    position: 'top',
                                    color: '#49AFFF'
                                }
                            }
                        }
                    },
                    {
                        type: 'bar',
                        name: '实际热量',
                        data: thermalAnalysis,
                        itemStyle: {
                            normal: {
                                color: '#66D9A9',
                                label: {
                                    show: true,
                                    position: 'top',
                                    color: '#66D9A9'
                                }
                            }
                        }
                    }
                ]
            };
            option && myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },
        myChart3() {
            //1.echarts初始化。
            let myChart = echarts.init(this.$refs['container3']);
            //2.设置图表配置项
            // 绘制图表
            let option;

            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'right',
                    bottom: '30%',
                    padding: [0, 20, 0, 0]
                },
                series: [
                    {
                        name: '食谱营养素产热比',
                        type: 'pie',
                        radius: '60%',
                        center: ['40%', '60%'],
                        data: [
                            { value: this.dataItem.nutrienter ? this.dataItem.nutrienter[0] : 0, name: '蛋白质' },
                            { value: this.dataItem.nutrienter ? this.dataItem.nutrienter[1] : 1, name: '脂肪' },
                            { value: this.dataItem.nutrienter ? this.dataItem.nutrienter[2] : 2, name: '糖类' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'inner', // 数值显示在内部
                                formatter: '{b}\n{d}%', // 格式化数值百分比输出
                            },
                        },
                        labelLine: {  //删除指示线
                            show: false
                        }
                    }
                ]
            };
            option && myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },
        myChart4() {
            //1.echarts初始化。
            let myChart = echarts.init(this.$refs['container4']);
            //2.设置图表配置项
            // 绘制图表
            let option;

            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'right',
                    bottom: '30%',
                    padding: [0, 20, 0, 0]
                },
                series: [
                    {
                        name: '食谱营三餐热能比',
                        type: 'pie',
                        radius: '60%',
                        center: ['40%', '60%'],
                        data: [
                            { value: this.dataItem.heatGeneration ? this.dataItem.heatGeneration[0] : 0, name: '早餐' },
                            { value: this.dataItem.heatGeneration ? this.dataItem.heatGeneration[1] : 1, name: '午餐' },
                            { value: this.dataItem.heatGeneration ? this.dataItem.heatGeneration[2] : 2, name: '晚餐' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'inner', // 数值显示在内部
                                formatter: '{b}\n{d}%', // 格式化数值百分比输出
                            },
                        },
                        labelLine: {  //删除指示线
                            show: false
                        }
                    }
                ]
            };
            option && myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },
        myChart5() {
            //1.echarts初始化。
            let myChart = echarts.init(this.$refs['container5']);
            //2.设置图表配置项
            // 绘制图表
            let option;

            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'right',
                    bottom: '30%',
                    padding: [0, 20, 0, 0]
                },
                series: [
                    {
                        name: '蛋白质分析图',
                        type: 'pie',
                        radius: '60%',
                        center: ['40%', '60%'],
                        data: [
                            { value: this.dataItem.highQualityprotein ? this.dataItem.highQualityprotein[0] : 0, name: '优质蛋白质' },
                            { value: this.dataItem.highQualityprotein ? this.dataItem.highQualityprotein[1] : 1, name: '一般蛋白质' },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'inner', // 数值显示在内部
                                formatter: '{b}\n{d}%', // 格式化数值百分比输出
                            },
                        },
                        labelLine: {  //删除指示线
                            show: false
                        }
                    }
                ]
            };
            option && myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },
    },
};
</script>

<style scoped lang="less">
/deep/.ivu-drawer-wrap {
    z-index: 9999999 !important;
}

/deep/.ivu-drawer-mask {
    z-index: 9999999 !important;
}

/deep/.ivu-drawer-body {
    padding: 0 !important;
}

.titleBox {
    height: 57px;
    background: #FFFFFF;
    padding: 0 24px;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #222222;
}

.contentBox {
    height: 100%;
    padding: 40px;
    background-color: #F2F5F9;
    display: flex;
    flex-direction: column;

    &-top {
        // height: 48%;
        display: flex;
        justify-content: space-between;

        &-item {
            width: 49%;
            // height: 100%;
            background: #FFFFFF;
            position: relative;

            &-ab {
                height: 12%;
                position: absolute;
                width: 100%;
                top: 10px;
                display: flex;
                justify-content: space-between;
                padding: 0 3%;
            }
        }
    }

    &-bottom {
        margin-top: 2%;
        flex: 1;
        display: flex;
        justify-content: space-between;

        &-item {
            width: 32%;
            height: 100%;
            background: #FFFFFF;
            position: relative;
        }
    }
}

.barBox {
    display: flex;

    &-item {
        display: flex;
        align-items: center;

        &-bar {
            width: 10px;
            height: 10px;
            background: red;
            margin-right: 10px;
        }

        div {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
        }
    }
}
</style>
